<template>
  <div>
    <!-- views/Component.vue -->
    <el-container>
      <el-header
        style="
          height: 40px;
          display: flex;
          background: #333333;
          justify-content: space-between;
        "
      >
        <h4>后台管理系统</h4>
        <!-- 水平导航菜单 -->
        <div>
          <el-button type="warning" @click="$router.push('/login')"
            >退出</el-button
          >
        </div>
      </el-header>
      <el-container>
        <el-aside width="65px" style="height: calc(100vh - 60px)">
          <!-- 垂直导航菜单 -->
          <el-menu
            router
            active-text-color="#666"
            style="border-right: none; height: 100%; background: #333333"
            collapse
            :default-active="$route.path"
          >
            <el-menu-item index="/component/container">
              <i class="el-icon-files"></i>
              <span slot="title">数据可视化</span>
            </el-menu-item>
            <el-menu-item index="/component/table">
              <i class="el-icon-s-grid"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="/component/form">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">订单管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main style="height: calc(100vh - 60px)">
          <!-- 用于匹配二级路由，动态显示内容 -->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style scoped>
h4 {
  color: white;
  margin: 0;
  padding: 10px;
}
.el-aside::-webkit-scrollbar {
  display: none;
}
</style>
